<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./libs/http.js"></script>
    <!-- 折线图 -->
    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('curve_show'));
            const xhr = new XMLHttpRequest();
            xhr.open('get', BigNew.articleNewCount);
            xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    const backData = JSON.parse(xhr.response)
                    console.log(backData);
                    if (backData.code === 200) {
                        let data = [], date = [];
                        backData.date.forEach(element => {
                            date.push(element.date);
                            data.push(element.count);
                        });
                        loadLineEcharts(date, data)
                    }
                }
            }

            function loadLineEcharts(date, data) {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['新增文章'],
                        top: '30'

                    },
                    title: {
                        left: 'center',
                        text: '月新增文章数',
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date,
                        name: '日'
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                    },

                    series: [
                        {
                            name: '新增文章',
                            type: 'line',
                            smooth: true,
                            // symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: 'rgb(240, 143, 57)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255,136,0,0.39)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(255,180,0,0.25)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,222,0,0.00)'
                                }])
                            },
                            data: data
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })

    </script>

    <!-- 环形图 -->
    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('pie_show'));
            const xhr = new XMLHttpRequest();
            xhr.open('get', BigNew.dataCategory);
            xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    const backData = JSON.parse(xhr.response)
                    console.log(backData);
                    if (backData.code === 200) {
                        loadPieEcharts(backData.date)
                    }
                }
            }

            function loadPieEcharts(data) {
                console.log(data.map((item) => parseInt(Math.random() * 100)));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    title: {
                        text: '分类文章数量比',
                        left: 'center'
                    },
                    legend: {
                        top: '30',
                        left: 'center',
                        data: data.map((item) => item.name)
                    },
                    color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                    series: [
                        {
                            name: '分类名称',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            center: ['50%', '60%'],
                            avoidLabelOverlap: true,
                            // startAngle: 360,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: data.map((item) => { return { name: item.name, value: item.articles } })
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })


    </script>
    <!-- 柱状图 -->
    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('column_show'));
            // const xhr = new XMLHttpRequest();
            // xhr.open('get', BigNew.dataCategory);
            // xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
            // xhr.send();
            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState === 4) {
            //         const backData = JSON.parse(xhr.response)
            //         console.log(backData);
            //         if (backData.code === 200) {
            //             loadPieEcharts(backData.date)
            //         }
            //     }
            // }
            loadBarEcharts()


            function loadBarEcharts() {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    title: {
                        text: '分类访问量',
                        left: 'center'
                    },
                    legend: {
                        top: '30',
                        data: ["爱生活", "爱旅行", "爱美食", "爱运动", "经济特区", "魂牵梦萦"]
                    },
                    grid: {
                        left: '3%',
                        right: '2.3%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],

                    series: [
                        {
                            name: '爱生活',
                            type: 'bar',
                            data: [77, 32, 36, 47, 33, 1]
                        },
                        {
                            name: '爱旅行',
                            type: 'bar',
                            data: [41, 77, 27, 61, 17, 12]
                        },
                        {
                            name: '爱美食',
                            type: 'bar',
                            data: [87, 57, 89, 44, 54, 17]
                        },
                        {
                            name: '爱运动',
                            type: 'bar',
                            data: [70, 24, 30, 49, 19, 77]
                        },
                        {
                            name: '经济特区',
                            type: 'bar',
                            data: [12, 50, 90, 50, 50, 76]
                        },
                        {
                            name: '魂牵梦萦',
                            type: 'bar',
                            data: [1, 84, 8, 15, 66, 88]
                        },

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })
    </script>

    <!-- 顶部统计数据 -->
    <script>
        $(function () {
            $.ajax({
                type: 'get',
                url: BigNew.dataInfo,
                success: function (backData) {
                    // console.log(backData);
                    const $spannel = $('.spannel_list .spannel>em');
                    // console.log($spannel);
                    Object.values(backData).forEach((element,index) => {
                        $spannel.eq(index).text(element);
                    });
                }
            })
        })
    </script>
</body>

</html>